<script setup lang="ts">
import { DataField } from '@formily/core';
import { useField } from '@formily/vue';
import { GlobalRegistry } from '@season-designable/core';
import { usePrefix } from '@season-designable/vue';
import ColorInput from '../ColorInput/index.vue';
import FoldItem from '../FoldItem/index.vue';
import InputItem from '../InputItems/InputItem.vue';
import InputItems from '../InputItems/InputItems.vue';
import SizeInput from '../SizeInput/SizeInput.vue';

const field = useField<DataField>();
const prefix = usePrefix('shadow-style-setter');

const emit = defineEmits(['change']);
const props = defineProps(['value']);

const createBoxShadowConnector = (position: number) => {
  const splited = String(props.value || '')
    .trim()
    .split(' ');

  return {
    value: splited[position],
    onChange: (value: any) => {
      splited[position] = value;
      emit(
        'change',
        `${splited[0] || ''} ${splited[1] || ''} ${splited[2] || ''} ${
          splited[3] || ''
        } ${splited[4] || ''}`
      );
    },
  };
};
</script>

<template>
  <FoldItem :class="prefix" :label="field.title">
    <template #base>
      <ColorInput :="createBoxShadowConnector(4)"></ColorInput>
    </template>

    <template #extra>
      <InputItems>
        <InputItem
          icon="mdi:arrow-collapse-up"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.AxisX')"
        >
          <SizeInput
            :exclude="['inherit', 'auto']"
            :="createBoxShadowConnector(0)"
          />
        </InputItem>

        <InputItem
          icon="mdi:arrow-collapse-down"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.AxisY')"
        >
          <SizeInput
            :exclude="['inherit', 'auto']"
            :="createBoxShadowConnector(1)"
          />
        </InputItem>

        <InputItem
          icon="mdi:arrow-collapse-left"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Left')"
        >
          <SizeInput
            :exclude="['inherit', 'auto']"
            :="createBoxShadowConnector(2)"
          />
        </InputItem>

        <InputItem
          icon="mdi:arrow-collapse-right"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Right')"
        >
          <SizeInput
            :exclude="['inherit', 'auto']"
            :="createBoxShadowConnector(3)"
          />
        </InputItem>
      </InputItems>
    </template>
  </FoldItem>
</template>

<style lang="scss" scoped></style>
